<template>
    <div>
      <!--      面包屑导航区域-->
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>商品管理</el-breadcrumb-item>
        <el-breadcrumb-item>参数列表</el-breadcrumb-item>
      </el-breadcrumb>
      <!--      卡片视图区域-->
      <el-card>
<!--        警告区域-->
        <el-alert title="注意：只允许为第三级分类设置相关参数!" type="warning" show-icon :closable="false"></el-alert>
<!--        选择商品分类区域-->
        <el-row class="elRow">
          <el-col>
            <span>选择商品分类：</span>
<!--            选择商品分类级联选择器-->
            <el-cascader v-model="selectedCatKeys" :options="cateList"
                         :props="cateProps" @change="handleChange" clearable></el-cascader>
          </el-col>
        </el-row>
<!--        tab页签区域-->
        <el-tabs v-model="activeName"  @tab-click="handleClick">
<!--          添加动态参数面板-->
          <el-tab-pane label="动态参数" name="many">
<!--            添加参数按钮-->
            <el-button type="primary" size="mini" :disabled="isBtnDisable" @click="showAddDialogVisible">添加参数</el-button>
<!--            动态参数表格-->
            <el-table :data="manyTableData" border stripe >
<!--              循环渲染Tag标签-->
              <el-table-column  type="expand">
                <template slot-scope="scope">
                  <el-tag v-for="(item,index) in scope.row.attr_vals" :key="index"
                          closable style="margin: 0 10px" @close="handleClose(index,scope.row)">
                    {{item}}
                  </el-tag>
<!--                  输入的文本框-->
                  <el-input v-if="scope.row.inputVisible" v-model="scope.row.inputValue"
                    ref="saveTagInput" size="small" @keyup.enter.native="handleInputConfirm(scope.row)"
                    @blur="handleInputConfirm(scope.row)" style="width: 100px">
                  </el-input>
<!--                  添加按钮-->
                  <el-button v-else class="button-new-tag" size="small" @click="showInput(scope.row)">+ New Tag</el-button>
                </template>
              </el-table-column>
              <el-table-column  type="index"></el-table-column>
              <el-table-column prop="attr_name" label="参数名称" ></el-table-column>
              <el-table-column  label="操作">
                <template slot-scope="scope">
                  <el-button type="primary" icon="el-icon-edit" size="mini" @click="showEditDialog(scope.row.attr_id)">编辑</el-button>
                  <el-button type="danger" icon="el-icon-delete" size="mini" @click="removeParamsById(scope.row.attr_id)">删除</el-button>
                </template>
              </el-table-column>
            </el-table>
          </el-tab-pane>
<!--          添加静态属性面板-->
          <el-tab-pane label="静态属性" name="only">
<!--            添加属性按钮-->
            <el-button type="primary" size="mini" :disabled="isBtnDisable" @click="showAddDialogVisible" >添加属性</el-button>
<!--            静态属性表格-->
            <el-table :data="onlyTableData" border stripe >
              <!--              循环渲染Tag标签-->
              <el-table-column  type="expand">
                <template slot-scope="scope">
                  <el-tag v-for="(item,index) in scope.row.attr_vals" :key="index"
                          closable style="margin: 0 10px" @close="handleClose(index,scope.row)">
                    {{item}}
                  </el-tag>
                  <!--                  输入的文本框-->
                  <el-input v-if="scope.row.inputVisible" v-model="scope.row.inputValue"
                            ref="saveTagInput" size="small" @keyup.enter.native="handleInputConfirm(scope.row)"
                            @blur="handleInputConfirm(scope.row)" style="width: 100px">
                  </el-input>
                  <!--                  添加按钮-->
                  <el-button v-else class="button-new-tag" size="small" @click="showInput(scope.row)">+ New Tag</el-button>
                </template>
              </el-table-column>
              <el-table-column  type="index"></el-table-column>
              <el-table-column prop="attr_name" label="参数名称" ></el-table-column>
              <el-table-column  label="操作">
                <template slot-scope="scope">
                  <el-button type="primary" icon="el-icon-edit" size="mini" @click="showEditDialog(scope.row.attr_id)">编辑</el-button>
                  <el-button type="danger" icon="el-icon-delete" size="mini" @click="removeParamsById(scope.row.attr_id)">删除</el-button>
                </template>
              </el-table-column>
            </el-table>
          </el-tab-pane>
        </el-tabs>
      </el-card>
<!--      添加参数的对话框-->
      <el-dialog :title="'添加'+titleText" :visible.sync="addDialogVisible" width="50%" @close="addDialogClosed">
      <el-form :model="addForm" :rules="addFormRules" ref="addFormRef" label-width="100px">
        <el-form-item :label="titleText" prop="attr_name">
          <el-input v-model="addForm.attr_name"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
          <el-button @click="addDialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="addParams">确 定</el-button>
        </span>
    </el-dialog>
<!--      修改参数对话框-->
      <el-dialog :title="'修改'+titleText" :visible.sync="editDialogVisible" width="50%" @close="editDialogClosed">
        <el-form :model="editForm" :rules="editFormRules" ref="editFormRef" label-width="100px">
          <el-form-item :label="titleText" prop="attr_name">
            <el-input v-model="editForm.attr_name"></el-input>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="editDialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="editParams">确 定</el-button>
        </span>
      </el-dialog>
    </div>
</template>

<script>
  export default {
    name: 'Params',
    data(){
      return{
        cateList:[],
        //级联选择框的配置对象
        cateProps:{
          expandTrigger:'hover',
          value:'cat_id',
          label:'cat_name',
          children:'children',
          // checkStrictly:true,
        },
        //级联选择框双向绑定的数组
        selectedCatKeys:[],
        //被激活的页签的名称
        activeName:'many',
        //动态参数的数据
        manyTableData:[],
        //静态属性的数据
        onlyTableData:[],
        addDialogVisible:false,
        //添加参数的表单数据对象
        addForm:{
          attr_name:''
        },
        //添加表单的验证规则对象
        addFormRules:{
          attr_name:[
            {required:true,message:'请输入参数名称',trigger:'blur'}
          ]
        },
        editDialogVisible:false,
        editForm:{
          attr_name:''
        },
        editFormRules:{
          attr_name:[
            {required:true,message:'请输入参数名称',trigger:'blur'}
          ]
        }

      }
    },
    created() {
      this.getCateList()
    },
    methods:{
      //获取所有的参数列表数据
      async getCateList(){
        const {data:res}=await this.$http.get('categories')
        if(res.meta.status!==200){
          return this.$message.error(res.meta.msg)
        }
        this.cateList=res.data
      },
      //级联选择框选中项变化，会触发这个函数
      handleChange(){
        this.getParamsData()
      },
      //tab页签点击事件的处理函数
      handleClick(){
        this.getParamsData()
      },
      //获取参数的列表数据
      async getParamsData(){
        //证明选中的不是三级分类
        if (this.selectedCatKeys.length!==3){
          this.selectedCatKeys=[]
          this.manyTableData=[]
          this.onlyTableData=[]
          return
        }
        //根据所选分类的id。和当前所处的面板，获取对应的参数
        const {data:res}=await this.$http.get(`categories/${this.cateId}/attributes`,{params:{sel:this.activeName}})
        if (res.meta.status!==200){
          return this.$message.error(res.meta.msg)
        }
        res.data.forEach(item=>{
          item.attr_vals=item.attr_vals ? item.attr_vals.split(' '):[]
          //添加属性，控制文本框的显示与隐藏
          item.inputVisible=false
          //添加属性，文本框中输入的值
          item.inputValue=''
        })
        if(this.activeName==='many'){
          this.manyTableData=res.data
        }else{
          this.onlyTableData=res.data
        }
      },
      // 点击按钮，显示添加对话框事件
      showAddDialogVisible(){
        this.addDialogVisible=true
      },
      // 监听添加对话框的关闭事件
      addDialogClosed(){
        this.$refs.addFormRef.resetFields()
      },
      //添加动态参数或者静态属性请求
      async addParams(){
        this.$refs.addFormRef.validate(valid=>{
          if(!valid) return
        })
        const {data:res}=await this.$http.post(`categories/${this.cateId}/attributes`,{
          attr_name:this.addForm.attr_name,
          attr_sel:this.activeName
        })
        if(res.meta.status!==201){
          return this.$message.error(res.meta.msg)
        }
        this.$message.success('添加参数成功！')
        this.addDialogVisible=false
        this.getParamsData()
      },
      //点击按钮，显示修改对话框
      async showEditDialog(id){
        //查询当前参数的信息
        const {data:res}=await this.$http.get(`categories/${this.cateId}/attributes/${id}`,{params:{attr_sel:this.activeName}})
        if(res.meta.status!==200){
          return this.$message.error(res.meta.msg)
        }
        this.editForm=res.data
        this.editDialogVisible=true
      },
      //监听编辑对话框的关闭事件
      editDialogClosed(){
        this.$refs.editFormRef.resetFields()
      },
      //点击按钮发送编辑参数请求并保存
      async editParams(){
        // 预校验
        this.$refs.editFormRef.validate(valid=>{
          if(!valid) return
        })
        const {data:res}=await this.$http.put(`categories/${this.cateId}/attributes/${this.editForm.attr_id}`,{attr_name:this.editForm.attr_name,attr_sel:this.activeName})
        if (res.meta.status!==200){
          return this.$message.error(res.meta.msg)
        }
        this.$message.success(res.meta.msg)
        this.getParamsData()
        this.editDialogVisible=false
      },
      //根据id删除对应的参数信息
      async removeParamsById(id){
        //弹窗询问用户是否删除参数
        const confirmResult=await this.$confirm(
          '此操作将永久删除该参数, 是否继续?',
          '提示',
          {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }
        ).catch(err=>{return err})

        // 如果用户确认了删除，则返回值为字符串 confirm
        // 如果用户取消了删除，则返回值为字符串 cancel
        if(confirmResult!=='confirm'){
          return this.$message.info('已取消删除')
        }
        const {data:res}=await this.$http.delete(`categories/${this.cateId}/attributes/${id}`)
        if(res.meta.status!==200){
          return this.$message.error(res.meta.msg)
        }
        this.$message.success(res.meta.msg)
        this.getParamsData()
      },
      //文本框失去焦点，或摁下enter都会触发
      async handleInputConfirm(row){
        if(row.inputValue.trim().length===0){
          row.inputValue=''
          row.inputVisible=false
          return
        }
        row.attr_vals.push(row.inputValue.trim())
        row.inputValue=''
        row.inputVisible=false
        this.saveAttrVals(row)
      },
      //点击按钮，展示文本输入框
      showInput(row){
        row.inputVisible=true
        //让文本框自动获得焦点
        //$nextTick方法的作用，就是当页面上元素被重新渲染之后，才会指定回调函数中的代码
        this.$nextTick(_ => {
          this.$refs.saveTagInput.$refs.input.focus();
        });
      },
      //保存对attr_vals的操作保存到数据库中
      async saveAttrVals(row){
        //需要发起请求，保存这次操作
        const {data:res}=await this.$http.put(`categories/${this.cateId}/attributes/${row.attr_id}`,{attr_name:row.attr_name,
          attr_sel :row.attr_sel,attr_vals:row.attr_vals.join(' ')})
        if(res.meta.status!==200){
          return this.$message.error(res.meta.msg)
        }
        this.$message.success(res.meta.msg)
      },
      //删除对应的参数可选项
      handleClose(index,row){
        row.attr_vals.splice(index,1)
        this.saveAttrVals(row)
      }

    },
    computed:{
      //如果按钮需要被禁用，则返回true，否则返回false
      isBtnDisable(){
        if(this.selectedCatKeys.length!==3){
          return true
        }
        return false
      },
      //当前选中的三级分类的id
      cateId() {
        if (this.selectedCatKeys.length ===3){
          return this.selectedCatKeys[2]
        }
        return null
      },
      //动态计算标题的文本
      titleText(){
        if(this.activeName==='many'){
          return '动态参数'
        }else{
          return '静态属性'
        }
      },
    }
  }
</script>

<style scoped lang="less">
.elRow{
  margin: 15px 0;
}
</style>
